<template>
    <div ref="chartContainer" style="width: 700px; height: 400px;margin: 10px auto;"></div>
</template>

<script>
import * as echarts from 'echarts';
import {fivesalesvolumee} from "../api/echarts";

export default {
  name: "echarts",
  data() {
    return {
      eData: [],
      lData: []
    };
  },
  mounted() {
    this.getFiveSalesVolume_e();
  },
  methods: {
    renderChart() {
      const chartContainer = this.$refs.chartContainer;
      const chart = echarts.init(chartContainer);

      const options = {
        title: {
          text: '前5销售额',
        },
        tooltip: {},
        legend: {
          data:['销售额']
        },
        xAxis: {
          data: [this.eData[0].title, this.eData[1].title, this.eData[2].title, this.eData[3].title, this.eData[4].title],
        },
        yAxis: {},
        series: [
          {
            name: '销售额',
            type: 'bar',
            data: [this.eData[0].sumPrice, this.eData[1].sumPrice, this.eData[2].sumPrice, this.eData[3].sumPrice, this.eData[4].sumPrice],
            itemStyle: {
              color: 'red', // 设置柱状图的颜色为绿色
            },
          },
        ],
      };

      chart.setOption(options);
    },
    getFiveSalesVolume_e() {
      fivesalesvolumee().then((res) => {
        console.log(res)
        if (res.flag == true) {
          this.eData = res.data;
          this.renderChart();
        } else {
          // alert(res.data.data);
        }
      });
    },
  },
};
</script>


<style scoped>

</style>